<template>
    <div class="monthEl">
        <div>
            <a-input :value="selectedValue" placeholder="选择一个或多个日期" @click.stop="isShow = true"
                style="width: 310px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top: 10px">
                <a-icon v-if="selectedValue" slot="suffix" type="close-circle" @click="handleClear" />
                <a-icon v-else slot="suffix" type="calendar" />
            </a-input>
        </div>
        <transition name="fade">
            <div class="month" v-show="isShow" v-clickOutside="handleBlur">
                <ul>
                    <li v-for="(item, i) in monthList" :key="i" @click="monthSelected(item)">
                        <span :class="{ 'selected': item.show }">{{ item.num }}</span>
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props: ['cycleList'],
    watch: {
        cycleList: {
            handler(list) {
                this.firstList = list
            }, immediate: true,

        }
    },
    data() {
        return {
            monthList: [],
            selectedValue: '',
            isShow: false,
            firstList: [],
        }
    },
    mounted() {
        // let date = new Date;
        // const year = date.getFullYear()
        // const month = date.getMonth() + 1
        // const day = new Date(year, month, 0).getDate()
        const day = 31
        for (let i = 1; i <= day; i++) {
            this.monthList.push({ num: i, show: false });
        }
    },
    methods: {
        // 选中月份
        monthSelected(item) {
            item.show = !item.show;
        },
        handleBlur() {
            let arr = [];
            let list = []
            this.monthList.forEach(e => {
                if (e.show) {
                    arr.push(e.num);
                }
            })
            // 编辑策略赋值
            if (arr.length == 0 && this.firstList) {
                this.selectedValue = this.firstList.map(item => String(item)).sort((a, b) => a - b).join(',')
                this.firstList.map((item, index) => this.monthList[item - 1].show = true)
                list = this.firstList
            }
            else if (arr.length != 0) {
                list = arr.map(item => String(item)).sort((a, b) => a - b)
                list.map((item, index) => this.monthList[item - 1].show = true)
                this.selectedValue = list.join(',')
                this.firstList = list
            }
            this.isShow = false;
            this.$emit('get-date', list)
        },
        handleClear() {
            this.monthList.forEach(e => { e.show = false; })
            this.selectedValue = '';
            this.firstList = []
            this.$emit('get-date', [])
        },
        handleClose() {
            this.monthList.forEach(e => { e.show = false; })
            this.firstList = []
            this.selectedValue = ''
            this.$emit('get-date', [])
        }
    }
}
</script>
<style lang="less" scoped>
.monthEl {
    position: relative;
    width: 310px;

    .fade-enter-active,
    .fade-leave-active {
        transition: all .2s;
    }

    .fade-enter,
    .fade-leave-active {
        opacity: 0;
        transform: translateY(-10px);
    }

    .month {
        position: absolute;
        top: 40px;
        z-index: 4;
        background: #fff;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        padding: 16px 12px 0;
        border-radius: 4px;
        width: 310px;

        p {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ebeef5;
            padding-bottom: 5px;

            i {
                font-size: 12px;
                margin-top: 7px;
            }
        }

        ul {
            list-style: none;
            padding-left: 0;

            li {
                width: 40px;
                height: 40px;
                line-height: 40px;
                display: inline-block;
                cursor: pointer;
                font-size: 12px;
                text-align: center;

                span {
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                }
            }

            li:hover {
                color: #006DB8;
            }

            .selected {
                color: #fff;
                background: #006DB8;
                border-radius: 15px;
            }
        }

        .mini {
            font-size: 12px;
        }

    }

    .month::before {
        //这里就是小三角了
        content: "";
        display: block;
        position: absolute;
        right: 10px; //给小三角定位，更具实际需求调整
        top: -20px; //给小三角定位，更具实际需求调整
        border-width: 10px;
        border-style: dashed dashed solid dashed; //四个参数分别代表向下，左，上右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
        border-color: transparent transparent #FFFFFF transparent; //四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
    }
}
</style>